<template>
  <!-- 编辑项目的弹窗 -->
  <el-dialog v-model="projectEditWinDialogVisible"
             title="编辑项目"
             width="50%"
  >
    <template #default>
      <el-form :model="editProject">
        <el-form-item label="项目id">
          <el-input v-model="editProject.projectId"/>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="editProject.projectName"/>
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input type="textarea" v-model="editProject.projectDesc"/>
          <!--           富文本编辑器的结构 -->
          <!--          <div style="border: 1px solid #ccc">-->
          <!--            <Toolbar-->
          <!--                style="border-bottom: 1px solid #ccc"-->
          <!--                :editor="editorRef"-->
          <!--                :defaultConfig="toolbarConfig"-->
          <!--                :mode="mode"-->
          <!--            />-->
          <!--            <Editor-->
          <!--                style="height: 500px; overflow-y: hidden;"-->
          <!--                v-model="valueHtml"-->
          <!--                :defaultConfig="editorConfig"-->
          <!--                :mode="mode"-->
          <!--                @onCreated="handleCreated"-->
          <!--            />-->
          <!--          </div>-->
        </el-form-item>
        <el-form-item label="项目负责人">
          <el-input v-model="editProject.user.username"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间">
              <el-date-picker
                  v-model="editProject.startTime"
                  type="date"
                  value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间">
              <el-date-picker
                  v-model="editProject.endTime"
                  type="date"
                  value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建时间">
              <el-date-picker
                  v-model="editProject.createTime"
                  type="date"
                  value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布时间">
              <el-date-picker
                  v-model="editProject.modifyTime"
                  type="date"
                  value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="项目状态">
          <el-radio-group v-model="editProject.projectStatus">
            <el-radio :value="1" label="草稿"/>
            <el-radio :value="2" label="发布"/>
            <el-radio :value="3" label="归档"/>
            <el-radio :value="4" label="暂停"/>
            <el-radio :value="5" label="意外"/>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="projectEditWinDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editProjectSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, ref, shallowRef, onMounted, watch} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import projectRequest from "@/api/project.js";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
// 申明这个组件的属性  projectId
const props = defineProps(['projectId']);
// 申明这个组件的事件  editComplete
const emits = defineEmits(['editComplete'])
let editProject = ref({})
let projectEditWinDialogVisible = ref(false)
const valueHtml = ref('');
/**
 * 根据id加载项目信息
 */
function loadProjectById(){
  projectRequest.getProjectById(props.projectId,res=>{
    if(res.data){
      // 确实加载到要编辑的数据了
      editProject.value = res.data;
      valueHtml.value = res.data.projectDesc;
      // 显示弹窗
      projectEditWinDialogVisible.value = true;
    }
  });
}

function editProjectSubmit() {
  console.log("editProject.value的值为:"+editProject.value)
  projectRequest.updateProjectById(editProject.value, res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "编辑成功"
      })
      projectEditWinDialogVisible.value = false;
      emits('editComplete');
    }

    else
      {
        ElMessage({
          type: "warning",
          message: "编辑失败"
        })
      }
  })
}
/**
 * 侦听器 侦听 props.projectId
 */
watch(()=>props.projectId,()=>{
  // 当props中的projectId发生变化的时候，我们就重新加载数据
  if(props.projectId){
    loadProjectById();
  }
});

</script>